<!DOCTYPE html>
<html>
<head>
    <title>丝迪姆少儿编程 - Python创作</title>
    <!--bootstrap-->
    <link rel="stylesheet" href="https://cdn.1717youxue.com/static/lib/bootstrap/css/bootstrap.min.css">
    <link href="https://cdn.1717youxue.com/static/lib/bootstrap/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.1717youxue.com/static/lib/bootstrap/js/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.1717youxue.com/static/lib/bootstrap/js/popper.min.js"></script>
    <script src="https://cdn.1717youxue.com/static/lib/bootstrap/js/bootstrap.min.js"></script>

    <!-- 编辑器及 python 模式高亮 -->
    <script type="text/javascript" src="https://cdn.1717youxue.com/static/lib/codemirror/lib/codemirror.js"></script>
    <script type="text/javascript" src="https://cdn.1717youxue.com/static/lib/codemirror/mode/python/python.js"></script>
    <script type="text/javascript" src="https://cdn.1717youxue.com/static/lib/codemirror/addon/edit/matchbrackets.js"></script>
    <script type="text/javascript" src="https://cdn.1717youxue.com/static/lib/codemirror/addon/edit/closebrackets.js"></script>
    <script type="text/javascript" src="https://cdn.1717youxue.com/static/lib/codemirror/addon/hint/show-hint.js"></script>
    <script type="text/javascript" src="https://cdn.1717youxue.com/static/lib/codemirror/addon/lint/lint.js"></script>
    <link rel="stylesheet" type="text/css" media="all" href="https://cdn.1717youxue.com/static/lib/codemirror/addon/hint/show-hint.css">
    <link rel="stylesheet" type="text/css" media="all" href="https://cdn.1717youxue.com/static/lib/codemirror/addon/lint/lint.css">
    <link rel="stylesheet" type="text/css" media="all" href="https://cdn.1717youxue.com/static/lib/codemirror/lib/codemirror.css">
    
    <!-- skulpt -->
    <script type="text/javascript" src="https://cdn.1717youxue.com/static/lib/skulpt/skulpt.min.js"></script>
    <script type="text/javascript" src="https://cdn.1717youxue.com/static/lib/skulpt/skulpt-stdlib.js"></script>
    <script type="text/javascript" src="./js/python-hint.js?v=1.0.0"></script>

    <!-- JQuery -->
    <script type="text/javascript" src="https://cdn.1717youxue.com/static/lib/jquery.splitter.js"></script>
    
    <!-- jq-console -->
    <script type="text/javascript" src="https://cdn.1717youxue.com/static/lib/jq-console/lib/jqconsole.js"></script>

    <!-- custom style -->
    <link rel="stylesheet" type="text/css" media="all" href="./css/style.css">
    <link rel="stylesheet" type="text/css" media="all" href="./css/jquery.splitter.css"/>
    <link rel="stylesheet" href="https://cdn.1717youxue.com/static/site/share/css/modal.css">
    <link rel="stylesheet" href="https://cdn.1717youxue.com/static/site/common/libs/jquery.messagetip.css">

    <!-- custom JavaScript -->
    <script src="https://cdn.1717youxue.com/static/site/common/libs/jquery.messagetip.js"></script>
    <script src="https://cdn.1717youxue.com/static/site/common/libs/jquery.qrcode.min.js"></script>
    <script type="text/javascript" src="./js/app.js?v=1.44"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
    <div class="container-fluid">
      <div id="menu" class="row mt-2 justify-content-between">
        <div class="col-auto mt-1">
            <div class="row ustify-content-start">
                <div class="col-auto mt-1">
                    <a href="#"><image src="https://cdn.1717youxue.com/static/site/pyeditor/image/logo_pyteditor.png" class="logo"/></a>
                </div>
                <div class="col-auto mt-1">
                    <input id="codeName" type="text" class="form-control"/>
                </div>
                <!-- <div class="col-auto mt-3">
                    <a href="#">>>下载PyGame编程助手</a>
                </div> -->
            </div>
        </div>
        <div id="notLogin" class="col-auto mt-2" style="text-align:right;">
            <!-- <a href="#" id="login" class="btn newBtn"><i class="fa fa-user mr-2"></i>登录</a> -->
            <!--已登录状态-->
            <!--<span class="username">平台用户名</span><a href="#" class="logout">（退出）</a>-->
            <!-- <button id="save" type="button" class="btn newBtn"><i class="fa fa-save fa-lg mr-2"></i>保存</button>
            <button id="publish" type="button" class="btn newBtn"><i class="fa fa-paper-plane-o mr-2"></i>发布</button>
            <button id="publish" type="button" class="btn newBtn"><i class="fa fa-share-alt mr-2"></i>分享</button>
            <button id="my" type="button" class="btn newBtn"><i class="fa fa-file-code-o mr-2"></i>我的作品</button> -->
        </div>   
        <div id="isLogin" style="margin-right: 15px;">
            <!-- <span id="username" class="username">平台用户名</span>&nbsp;&nbsp;<a href="#" class="logout">（退出）</a> -->
            <button id="publishBtn" type="button" class="btn newBtn"><i class="fa fa-paper-plane-o mr-2"></i>提交</button>
            <button id="save" type="button" class="btn newBtn" style="display: none;"><i class="fa fa-paper-plane-o mr-2"></i>提交</button>
            <!-- <button id="publish" type="button" class="btn newBtn"><i class="fa fa-share-alt mr-2"></i>分享</button> -->
            <!-- <button id="profile" type="button" class="btn newBtn"><i class="fa fa-file-code-o mr-2"></i>我的作品</button> -->
        </div>
      </div>
      <div id="ctrl" class="row mt-2 mb-2 justify-content-between">
        <div class="col-auto">
            <button id="runBtn" type="button" class="btn newBtn"><i class="fa fa-play fa-lg mr-2"></i>运行代码</button>
            <button id="reset" type="button" class="btn newBtn"><i class="fa fa-refresh mr-2"></i>重置</button>
        </div>
        <div class="col-auto" style="text-align:right;">
            <button id="clearConsole" type="button" class="btn newBtn"><i class="fa fa-trash-o fa-lg mr-2"></i>清除终端</button>
        </div>
      </div>
      <div class="d-flex" id="main" style="height:610px">
        <div id="left">
          <textarea id="code_area" style="width:100%;">print("欢迎来到丝迪姆少儿编程！")</textarea>
        </div>
        <div id="right">
          <div id="top">
            <div id="console" class="mr-3"></div>
          </div>
          <div id="bottom">
            <div id="code_canvas" class="code_canvas mr-3">
              <!-- <ul class="list-group list-group-flush">
                <li class="list-group-item d-flex justify-content-between align-items-center">
                  test.jpg
                  <div>
                    <button type="button" class="btn btn-primary">查看</button>
                    <button type="button" class="btn btn-success">复制</button>
                  </div>
                </li>
              </ul> -->
            </div>
          </div>  
        </div>
      </div>
    </div>

    <div class="modal fade" id="publish" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 700px;">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="projectTitle">作品名称</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col-6" id="projectCover">
                
                </div>
                <div class="col-6">
                  <div class="container">
                    <div class="row">
                      <span style="color: red;padding-right: 2px;">*</span>
                      <span style="color: #333333;margin-bottom: 5px;font-size: 14px;">作品简介：</span><br>
                      <textarea class="form-control" id="workDesc" rows="4"></textarea>
                    </div>
                    <div class="row">
                      <span style="color: red;padding-right: 2px;margin-top: 5px;">*</span>
                      <span style="color: #333333;margin-bottom: 5px;margin-top: 5px;font-size: 14px;">操作说明：</span><br>
                      <textarea class="form-control" id="operateDesc" rows="4"></textarea>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" style="width:120px;" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            <button type="button" style="width:120px;" class="btn btn-primary" onclick="onShare();">提交</button>
          </div>
        </div>
      </div>
    </div>

    <div class="modal fade" id="showQrcode" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 450px;">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="projectTitle">扫码分享朋友圈</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div id="shareQrCode"></div>
          </div>
          <div class="modal-footer">
            <button type="button" style="width:120px;" class="btn btn-secondary" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>

    <div id="loading_modal" class="modal" style="display: none">
      <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
    </div>

    <script>
      $(() => {
          setSize()
          
          var splitter = $('#main').split({
              orientation: 'vertical',
              limit: 10,
              position: '50%',
              percent: true,
              onDrag: function(event) {
                  //setSize()
              }
          });
  
          var splitter = $('#right').split({
              orientation: 'horizontal',
              limit: 10,
              position: '35%',
              percent: true,
              onDrag: function(event) {
                  setSize()
              }
          });
      })
    </script>
</body>
</html>